<template>
	<a-card style="margin: -15px">
		<!--首页轮播查询条件-->
		<a-row style="margin-bottom: 1rem">
			<!--放置搜索条件-->
			<a-col :span="3">
				<a-select
					ref="select"
					v-model:value="this.page.status"
					style="width: 80px;margin-top: 4px"
					@focus="focus"
					@change="handleChange"
					placeholder="状态"
				>
					<a-select-option value="0">禁用</a-select-option>
					<a-select-option value="1">启用</a-select-option>
					<a-select-option value="">全部</a-select-option>

				</a-select>
			</a-col>
			<a-col :span="6">
				<a-input-search
					v-model:value="this.page.keyword"
					placeholder="搜索关键字"
					enter-button="搜索"
					size="large"
					@search="onSearch"
				/>
			</a-col>
			<a-col :push=this.number :span="3">
				<a-button type="primary" style="width: 90px;height: 40px" @click="addNotice">
					<PlusOutlined />
					添加
				</a-button>
			</a-col>


		</a-row>
		<!--首页轮播列表-->
		<a-row style="margin-bottom: 1rem">
			<a-col :span="24">
				<a-table :columns="columns" :data-source="data" :pagination="false" :rowKey="generateRowKey">

					<template #bodyCell="{ column, record,index }">
						<template v-if="column.key === 'clickEffect'">
							<span v-if="record.clickEffect==0">展示图片</span>
							<span v-if="record.clickEffect==1">内部链接</span>
							<span v-if="record.clickEffect==2">外部链接</span>
						</template>
						<template v-if="column.key === 'carouselUrl'">
							<a-image :src="record.carouselUuidUrl" :height="60" :width="70"></a-image>
						</template>
						<template v-if="column.key === 'carouselNum'">
          <span v-if="record.status==1">
            <span v-if="index==0">
               <a-button type="link" @click="sub(record.id,record.carouselNum,index)"><ArrowDownOutlined /></a-button>
            </span>
            <span v-if="index>0">
              <a-button type="link" @click="sub(record.id,record.carouselNum,index)"><ArrowDownOutlined /></a-button>
               <a-button type="link" @click="plus(record.id,record.carouselNum,index)"><ArrowUpOutlined /></a-button>
            </span>


          </span>

							<span v-if="record.status==0"></span>


						</template>

						<template v-if="column.key === 'action'">
           <span v-if="record.status==0">
            <a-dropdown>
      <template #overlay>
        <a-menu>
          <a-menu-item key="3" @click="update(record.id)">修改</a-menu-item>
          <a-menu-item key="4" @click="getCarousel(record.id)">查看</a-menu-item>
          <a-menu-item key="5" @click="del(record.id)">删除</a-menu-item>
          <a-menu-item key="7" @click="start(record.id,record.carouselNum)">启用</a-menu-item>
        </a-menu>
      </template>
      <a-button>
        操作
        <DownOutlined />
      </a-button>
    </a-dropdown>
           </span>
							<span v-if="record.status==1">
            <a-dropdown>
      <template #overlay>
        <a-menu>
          <a-menu-item key="1" @click="getCarousel(record.id)">查看</a-menu-item>
          <a-menu-item key="2" @click="dis(record.id)">禁用</a-menu-item>
        </a-menu>
      </template>
      <a-button>
        操作
        <DownOutlined />
      </a-button>
    </a-dropdown>
           </span>

						</template>
						<template v-if="column.key === 'status'">
							<a-tag v-if="record.status==0" :bordered="false" color="default">禁用</a-tag>
							<a-tag v-if="record.status==1" :bordered="false" color="success">启用</a-tag>
						</template>
						<template v-if="column.key ==='updateTime'">
							<span v-if="record.updateTime==null">暂未更新</span>
						</template>
					</template>
				</a-table>
			</a-col>
		</a-row>
		<!--分页组件-->
		<a-flex justify="flex-end">
			<a-pagination
				size="small"
				@change="onChange"
				show-size-changer
				:pageSizeOptions="['5','10','20','50','100']"
				v-model:current="this.page.pageNo"
				v-model:page-size="this.page.pageSize"
				:total="this.page.total"
				:show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`" />
		</a-flex>
	</a-card>
	<!--  修改抽屉-->
	<a-drawer
		title="编辑站内公告"
		:width="750"
		:open="updateOpen"
		:body-style="{ paddingBottom: '80px' }"
		:footer-style="{ textAlign: 'right' }"
		@close="onClose"
	>
		<template #extra>
			<a-button style="margin-right: 8px" @click="onClose()">取消</a-button>
			<a-button type="primary" @click="editNotice()">保存</a-button>
		</template>
		<!--修改的表单-->
		<a-form :model="editCarouselInfo" ref="formRef" layout="vertical">
			<!--首页轮播标题-->
			<a-row :gutter="20">
				<a-col :span="20">
					<a-form-item
						label="首页轮播标题:"
						name="title"
						:rules="[{ required: true, message: '首页轮播标题不能为空!' },{min: 1,max:125, message: '您填写的首页轮播标题过长'}]"
					>
						<a-textarea v-model:value="editCarouselInfo.title" placeholder="请填写首页轮播标题" />
					</a-form-item>
				</a-col>
			</a-row>

			<!--首页轮播封面-->
			<a-row :gutter="20">
				<a-col :span="20">
					<a-form-item ref="carouselUrl" label="首页轮播封面:" name="carouselUrl">
						<a-upload
							:beforeUpload="beforeUpload"
							:customRequest="onUpload"
							:max-count="1"
							:show-upload-list="true"
							class="avatar-uploader"
							list-type="picture-card"
							name="avatar"
							@change="editCustomRequestMinio"
							:file-list="fileList">
							<div>
								<PlusOutlined />
							</div>
						</a-upload>
					</a-form-item>
				</a-col>
			</a-row>

			<!--首页轮播状态-->
			<a-row :gutter="20">
				<a-col :span="20">
					<a-form-item label="状态:" name="status" :required="[{ required: true, message: '请选择状态', trigger: 'change' }]">
						<a-radio-group v-model:value="editCarouselInfo.status">
							<a-radio value="0">禁用</a-radio>
							<a-radio value="1">启用</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>

			<!--点击处理方式-->
			<a-row :gutter="20">
				<a-col :span="20">
					<a-form-item
						label="点击处理方式:"
						name="clickEffect"
						:required="[{ required: true, message: '请选择处理方式', trigger: 'change' }]"
					>
						<a-select placeholder="请选择点击处理方式" v-model:value="editCarouselInfo.clickEffect">
							<a-select-option value="0">纯点击</a-select-option>
							<a-select-option value="1">内部链接</a-select-option>
							<a-select-option value="2">外部链接</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>

			<!--内部链接-->
			<a-row :gutter="20" v-if="editCarouselInfo.clickEffect==1">
				<a-col :span="20">
					<a-form-item
						label="内部链接:"
						name="linkAddress"
						:required="[{ required: true, message: '请选择内部链接', trigger: 'change' }]"
					>
						<a-textarea v-model:value="editCarouselInfo.linkAddress" placeholder="请填写内部链接" />
					</a-form-item>
				</a-col>
			</a-row>

			<!--外部链接-->
			<a-row :gutter="20" v-if="editCarouselInfo.clickEffect==2">
				<a-col :span="20">
					<a-form-item
						label="外部链接:"
						name="linkAddr"
						:required="[{ required: true, message: '请选择外部链接', trigger: 'change' }]" >
						<a-textarea v-model:value="editCarouselInfo.linkAddress" placeholder="请填写外部链接" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>

	</a-drawer>
	<!--  添加抽屉-->
	<a-drawer
		title="添加首页轮播图"
		:width="750"
		:open="addOpen"
		:body-style="{ paddingBottom: '80px' }"
		:footer-style="{ textAlign: 'right' }"
		@close="addOnClose"
	>
		<template #extra>
			<a-button style="margin-right: 8px" @click="addOnClose()">取消</a-button>
			<a-button type="primary" @click="saveCarousel()">保存</a-button>
		</template>
		<!--添加的表单-->
		<a-form :model="carouselInfo" ref="formRef" layout="vertical">

			<!--首页轮播标题-->
			<a-row :gutter="20">
				<a-col :span="20">
					<a-form-item
						label="首页轮播标题:"
						name="title"
						:rules="[{ required: true, message: '首页轮播标题不能为空!' },{min: 1,max:125, message: '您填写的首页轮播标题过长'}]"
					>
						<a-textarea v-model:value="carouselInfo.title" placeholder="请填写首页轮播标题" />
					</a-form-item>
				</a-col>
			</a-row>

			<!--首页轮播封面-->
			<a-row :gutter="20">
				<a-col :span="20">
					<a-form-item ref="carouselUrl" label="首页轮播封面:" name="carouselUrl">
						<a-upload
							:beforeUpload="beforeUpload"
							:customRequest="onUpload"
							:max-count="1"
							:show-upload-list="true"
							class="avatar-uploader"
							list-type="picture-card"
							name="avatar"
							@change="customRequestMinio">
							<div>
								<PlusOutlined />
							</div>
						</a-upload>
					</a-form-item>
				</a-col>
			</a-row>

			<!--首页轮播状态-->
			<a-row :gutter="20">
				<a-col :span="20">
					<a-form-item label="状态:" name="status" :required="[{ required: true, message: '请选择状态', trigger: 'change' }]">
						<a-radio-group v-model:value="carouselInfo.status">
							<a-radio value="0">禁用</a-radio>
							<a-radio value="1">启用</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>

			<!--点击处理方式-->
			<a-row :gutter="20">
				<a-col :span="20">
					<a-form-item
						label="点击处理方式:"
						name="clickEffect"
						:required="[{ required: true, message: '请选择处理方式', trigger: 'change' }]"
					>
						<a-select placeholder="请选择点击处理方式" v-model:value="carouselInfo.clickEffect">
							<a-select-option value="0">纯点击</a-select-option>
							<a-select-option value="1">内部链接</a-select-option>
							<a-select-option value="2">外部链接</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>

			<!--内部链接-->
			<a-row :gutter="20" v-if="carouselInfo.clickEffect==1">
				<a-col :span="20">
					<a-form-item
						label="内部链接:"
						name="linkAddress"
						:required="[{ required: true, message: '请选择内部链接', trigger: 'change' }]"
					>
						<a-textarea v-model:value="carouselInfo.linkAddress" placeholder="请填写内部链接" />
					</a-form-item>
				</a-col>
			</a-row>

			<!--外部链接-->
			<a-row :gutter="20" v-if="carouselInfo.clickEffect==2">
				<a-col :span="20">
					<a-form-item
						label="外部链接:"
						name="linkAddr"
						:required="[{ required: true, message: '请选择外部链接', trigger: 'change' }]" >
						<a-textarea v-model:value="carouselInfo.linkAddress" placeholder="请填写外部链接" />
					</a-form-item>
				</a-col>
			</a-row>


		</a-form>
	</a-drawer>

	<!--  查看详情-->
	<template>
		<div>
			<a-modal v-model:open="this.openn" width="500px" title="首页轮播图信息">
				<br />
				<a-descriptions :column=1>
					<a-descriptions-item label="首页轮播图">

						<a-image :src="this.getCarouselInfo.carouselUuidUrl" :height="100" :width="110"></a-image>
					</a-descriptions-item>
					<a-descriptions-item label="标题">{{ this.getCarouselInfo.title }}</a-descriptions-item>
					<a-descriptions-item label="状态">
						<span v-if="this.getCarouselInfo.status==0">禁用</span>
						<span v-if="this.getCarouselInfo.status==1">启用</span>
					</a-descriptions-item>
					<a-descriptions-item label="点击效果">
						<span v-if="this.getCarouselInfo.clickEffect==0">展示图片</span>
						<span v-if="this.getCarouselInfo.clickEffect==1">内部链接</span>
						<span v-if="this.getCarouselInfo.clickEffect==2">外部链接</span>

					</a-descriptions-item>
					<a-descriptions-item label="链接地址">{{ this.getCarouselInfo.linkAddress }}</a-descriptions-item>
					<a-descriptions-item label="创建人">{{ this.getCarouselInfo.createUser }}</a-descriptions-item>
					<a-descriptions-item label="创建时间">{{ this.getCarouselInfo.createTime }}</a-descriptions-item>
					<a-descriptions-item label="更新人">{{ this.getCarouselInfo.updateUser }}</a-descriptions-item>
					<a-descriptions-item label="更新时间">{{ this.getCarouselInfo.updateTime }}</a-descriptions-item>

				</a-descriptions>
			</a-modal>
		</div>
	</template>
	<Upload ref="upload"></Upload>
</template>


<script>


import carousel from "@/api/nft/content/carousel";
import { message } from "ant-design-vue";
import fileApi from "@/api/dev/fileApi";

const key = "updatable";

export default {
	// components: {
	// 	Upload
	// },
	name: "homePage",
	data() {
		return {
			//上传文件
			onUpload: true,
			fileList:[{
				uid: '-1',
				name: 'image.png',
				status: 'done',
				url: null,
			}],
			content: "",
			number: 13,
			pagination: 11,

			//抽屉
			updateOpen: false,
			addOpen: false,
			openn: false,
			page: {
				keyword: "",
				status: "",
				pageNo: 1,
				pageSize: 5,
				total: ""
			},

			//列表
			columns: [
				{
					title: "调整顺序",
					dataIndex: "carouselNum",
					key: "carouselNum"

				},
				{
					title: "封面",
					dataIndex: "carouselUrl",
					key: "carouselUrl"
				},
				{
					title: "点击效果",
					dataIndex: "clickEffect",
					key: "clickEffect"
				},
				{
					title: "状态",
					dataIndex: "status",
					key: "status"
				},
				{
					title: "更新时间",
					dataIndex: "updateTime",
					key: "updateTime"
				},


				{
					title: "操作",
					key: "action"
				}
			],
			//列表查出来的数据
			data: [],
			//字典
			dict: [],

			//首页轮播添加对象
			carouselInfo: {
				title: "",
				status: "",
				carouselUrl: "",
				carouselUuidUrl: "",
				clickEffect: "",
				linkAddress: ""

			},
			//首页轮播修改对象
			editCarouselInfo: {
				id: "",
				title: "",
				status: "",
				carouselUrl: "",
				carouselUuidUrl: "",
				clickEffect: "",
				linkAddress: ""
			},
			//首页轮播查看
			getCarouselInfo: {
				title: "",
				status: "",
				carouselUrl: "",
				carouselUuidUrl: "",
				clickEffect: "",
				linkAddress: "",
				createUser: "",
				createTime: "",
				updateUser: "",
				updateTime: ""
			}


		};
	},
	methods: {

		// 事件: 上传文件之前
		beforeUpload(file, fileList) {
			// 显示错误提示(防抖处理)
			const showErrorMsg = debounce(this.$message.error, 20);
			// 验证文件大小
			const isLt1M = file.size / 1024 / 1024 < 2;
			if (!isLt1M) {
				showErrorMsg("文件大小不能超出2MB");
				return false;
			}
			// 验证文件上传数量
			if (fileList.length > 1) {
				showErrorMsg("一次上传的文件数量不能超出1个");
				return false;
			}
			return true;
		},
		//上传首页轮播图
		customRequestMinio(data) {
			this.onUpload = true;
			// 转换为file类型
			const fileData = new FormData();
			fileData.append("file", data.file);
			this.carouselInfo.carouselUrl = data.file.name;
			fileApi
				.fileUploadMinioReturnUrl(fileData)
				.then((data) => {
					this.carouselInfo.carouselUuidUrl = data;
				});
		},
		//上传首页轮播图
		editCustomRequestMinio(data) {
			this.onUpload = true;
			// 转换为file类型
			const fileData = new FormData();
			fileData.append("file", data.file);
			this.editCarouselInfo.carouselUrl = data.file.name;
			fileApi
				.fileUploadMinioReturnUrl(fileData)
				.then((data) => {
					this.editCarouselInfo.carouselUuidUrl = data;
				});
		},
		//分页查询站内公告
		query() {
			debugger
			carousel.queryList(this.page).then((res) => {
				console.log(res);
				this.data = res.records;
				this.page.pageSize = res.size;
				this.page.total = res.total;
			}).catch((error) => {
				message.error(error);
			});
		},
		//搜索框
		onSearch() {
			this.page.pageNo = 1;
			this.query();
		},
		//分页插件
		onChange(pageNo) {
			this.query();
			this.page.pageNo = pageNo;

		},

		//添加站内公告
		saveCarousel() {
			debugger
			//通过ref定位到from表单
			let formRef = this.$refs.formRef;
			//触发from表单的验证
			debugger
			formRef.validate().then(() => {
				debugger
				carousel.addCarousel(this.carouselInfo).then((resp) => {

					this.query();

					this.addOpen = false;
				}).catch((error) => {
					message.error(error);
				});

			});
		},
		//操作(查看)
		getCarousel(type) {
			debugger
			carousel.getCarousel(type).then((res) => {
				this.getCarouselInfo = res;
			}).catch((error) => {
				message.error(error);
			});
			this.openn = true;
		},
		//操作(修改)
		update(type) {
			debugger
			carousel.getCarousel(type).then((resp) => {
				debugger
				this.editCarouselInfo = resp;

				this.fileList[0].url = this.editCarouselInfo.carouselUuidUrl;
				this.fileList[0].name  = this.editCarouselInfo.carouselUrl
			}).catch((error) => {
				alert(error);
			});
			this.updateOpen = true;
		},
		//修改首页轮播
		editNotice() {
			debugger
			//通过ref定位到from表单
			let formRef = this.$refs.formRef;
			//触发from表单的验证
			debugger
			formRef.validate().then(() => {
				debugger
				carousel.editCarousel(this.editCarouselInfo).then((resp) => {
					debugger
					message.loading({ content: "保存中...", key });

					this.query();

				}).catch((error) => {
					message.error(error);
				});
				this.updateOpen = false;
			}).catch((error) => {
				message.error("修改失败");
			});


		},
		//操作(删除)
		del(type) {
			carousel.delCarousel(type).then((resp) => {

				this.query();

			}).catch((error) => {

				message.error(error);
			});
		},
		//启用
		start(id, index) {
			debugger
			carousel.startCarousel(id, index).then((resp) => {
				debugger

				this.query();


			}).catch((error) => {
				message.error(error);
			});

		},
		//禁用
		dis(type) {

			carousel.disCarousel(type).then((resp) => {
				this.query();
			}).catch((error) => {
				message.error(error);
			});
		},

		//上移
		plus(id, num, index) {
			num = index;
			debugger
			carousel.adjustCarousel(id, num).then((resp) => {
				this.query();
			}).catch((error) => {
				message.error(error);
			});
		},
		//下移
		sub(id, num, index) {
			debugger
			carousel.descAdjustCarousel(id, num).then((resp) => {
				this.query();
			}).catch((error) => {
				message.error(error);
			});
		},

		//抽屉修改取消事件
		onClose() {
			this.updateOpen = false;
		},
		//抽屉添加弹出事件
		addNotice() {

			this.addOpen = true;
		},
		addOnClose() {
			this.addOpen = false;

			this.$refs["formRef"].resetFiel;

		}

	},
	mounted() {
		this.query();

	}
};
</script>

<style scoped>

</style>
